<template>
    <div class="index-container">
        <div id="three-container"></div>
        <div id="instructions">
            <div style="text-align: center; clear: both"> </div>
        </div>
        <div class="btn-con" v-if="isShowBtn">
            <button @click="toChange" class="custom-btn btn-4">再来一个</button>
            <button @click="reStart" class="custom-btn btn-4">保存海报</button>
        </div>
    </div>
</template>

<script>
import '@/helper/OrbitControls-2.js';
import '@/helper/three.min.js';
import '@/helper/TweenMax.min.js';

import { default as THREE } from '../helper/three.min.js';
import THREERoot from '../helper/threeRoot.js';
import Slide from '../helper/Slide.js';
import { Dialog, Toast } from 'vant';
import { makePoster } from '@/api';

var root = null;
var aniTl = null;
var load1 = null;
var load2 = null;
var slide = null;
var slide2 = null;

export default {
    data() {
        return {
            unionid: '',

            frontImg: 'https://qncdn.mopic.mozigu.net/f/o0enm5lqh2rbsqbopel/126890cb9e64/bg-img.png',
            backImg: '',
            nextImg: '',

            isToggle: false,
            isShowBtn: false,
            changeCount: 1,
        };
    },
    mounted() {
        Toast.loading({
            message: '',
            forbidClick: true,
            duration: 0,
        });

        var url = window.location.href;
        var params = new URL(url).searchParams;
        this.unionid = params.get('unionid');

        this.makePosterFn().then(url => {
            this.backImg = url;
            this.init();
        });

        console.log('Slide --->', new Slide());
        console.log('THREERoot', new THREERoot());
    },
    methods: {
        init() {
            root = new THREERoot({
                createCameraControls: !true,
                antialias: window.devicePixelRatio === 1,
                fov: 80,
            });

            root.renderer.setClearColor(0x000000, 0);
            root.renderer.setPixelRatio(window.devicePixelRatio || 1);
            root.camera.position.set(0, 0, 60);

            var width = 52;
            var height = 100;

            slide = new Slide(width, height, 'out');
            load1 = new THREE.ImageLoader();
            load1.setCrossOrigin('*');
            load1.load(this.frontImg, img => {
                slide.setImage(img);
            });
            root.scene.add(slide);

            slide2 = new Slide(width, height, 'in');
            load2 = new THREE.ImageLoader();
            load2.setCrossOrigin('*');
            load2.load(this.backImg, img => {
                slide2.setImage(img);
                setTimeout(() => {
                    this.isShowBtn = true;
                }, 1500);
            });
            root.scene.add(slide2);

            aniTl = new TimelineMax({ delay: 1, repeat: 0, repeatDelay: 1.0, yoyo: true });
            aniTl.add(slide.transition(), 0);
            aniTl.add(slide2.transition(), 0);

            Toast.clear();
        },
        toChange() {
            Toast.loading({
                message: '',
                forbidClick: true,
                duration: 0,
            });
            this.changeCount += 1;
            if (!this.isToggle) {
                console.log('换frontImg');
                this.makePosterFn().then(url => {
                    this.frontImg = url;
                    load1.load(this.frontImg, img => {
                        slide.setImage(img);
                        aniTl.reverse();
                        this.isToggle = true;
                    });
                });
            } else {
                console.log('换backImg');
                this.makePosterFn().then(url => {
                    this.backImg = url;
                    load2.load(this.backImg, img => {
                        slide2.setImage(img);
                        aniTl.play(0);
                        this.isToggle = false;
                    });
                });
            }
        },
        reStart() {
            let url = this.isToggle ? this.frontImg : this.backImg;
            window.wx.miniProgram.navigateTo({ url: `/pages/host/host?isShow=true&url=${url}` });
        },
        makePosterFn() {
            return new Promise((resolve, reject) => {
                let data = {
                    unionid: this.unionid,
                };
                makePoster(this.changeCount, data)
                    .then(res => {
                        if (res.url) {
                            resolve(res.url);
                        } else {
                            Toast.fail('生成失败，请稍后重试');
                            reject();
                        }
                    })
                    .catch(err => {
                        Toast.fail('生成失败，请稍后重试');
                        reject(err);
                    });
            });
        },
    },
};
</script>

<style scoped>
.index-container {
    width: 100%;
    height: 100%;
    position: relative;
}
#instructions {
    position: absolute;
    color: #fff;
    bottom: 0;
    padding-bottom: 6px;
    font-family: sans-serif;
    width: 100%;
    text-align: center;
    pointer-events: none;
}
.btn-con {
    position: absolute;
    width: 100%;
    bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.custom-btn {
    width: 35%;
    height: 70px;
    color: #fff;
    border-radius: 10px;
    padding: 10px 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1),
        4px 4px 5px 0px rgba(0, 0, 0, 0.1);
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-4 span {
    position: relative;
    display: block;
    width: 100%;
}
.btn-4 span:before {
    width: 0.1px;
    height: 0%;
}
.btn-4 span:after {
    width: 0%;
    height: 0.1px;
}
.btn-4 {
    background-color: #4dccc6;
    background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
    line-height: 42px;
    padding: 0;
    border: none;
}
.btn-4:before {
    height: 0%;
    width: 0.1px;
}
.btn-4:before,
.btn-4:after {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.9), -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
        inset -4px -4px 6px 0 rgba(255, 255, 255, 0.9), inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
    transition: all 0.3s ease;
}
.btn-4:active:before {
    height: 100%;
}
.btn-4:active {
    background-color: #89d8d3;
    background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
}
.btn-4:active:after {
    width: 100%;
}
.btn-4 span:active:before {
    height: 100%;
}
.btn-4 span:active:after {
    width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.9), -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
        inset -4px -4px 6px 0 rgba(255, 255, 255, 0.9), inset 4px 4px 6px 0 rgba(116, 125, 136, 0.3);
    transition: all 0.3s ease;
}
</style>
